import React, { useMemo } from 'react'
import MonthBill from './MonthBill'
import _ from 'lodash'
import dayjs from 'dayjs'
const MonthBillList = ({ billsList }) => {
	const monthGroup = useMemo(() => {
		const groupData = _.groupBy(billsList, item => dayjs(item.date).format('YYYY-MM'))
		const keys = Object.keys(groupData)
		return {
			keys,
			groupData
		}
	}, [billsList])

	return (
		<div style={{ marginTop: '0.5rem' }}>
			{monthGroup.keys.map(key => <MonthBill key={key} date={key} billsList={monthGroup.groupData[key]} />)}
		</div>
	)
}

export default MonthBillList